<template>
  <v-dialog v-model="dialogVisible" max-width="500px">
    <v-card>
      <v-card-title>用户信息</v-card-title>
      <v-card-text>
        <!-- 头像展示区域 -->
        <div class="d-flex flex-column align-center mb-4">
          <v-avatar size="100">
            <v-img :src="user?.avatar || defaultAvatar" cover />
          </v-avatar>
        </div>

        <v-list>
          <v-list-item>
            <v-list-item-title>用户名</v-list-item-title>
            <v-list-item-subtitle>{{ user?.username }}</v-list-item-subtitle>
          </v-list-item>

          <v-list-item>
            <v-list-item-title>邮箱</v-list-item-title>
            <v-list-item-subtitle>{{ user?.email }}</v-list-item-subtitle>
          </v-list-item>

          <v-list-item>
            <v-list-item-title>角色</v-list-item-title>
            <v-list-item-subtitle>
              <v-chip
                v-for="role in user?.roles"
                :key="role"
                color="primary"
                variant="flat"
                class="mr-1"
              >
                {{ role.description }}
              </v-chip>
            </v-list-item-subtitle>
          </v-list-item>

          <v-list-item>
            <v-list-item-title>状态</v-list-item-title>
            <v-list-item-subtitle>
              <v-chip :color="user?.status === 1 ? 'success' : 'error'" variant="flat">
                {{ user?.status === 1 ? '启用' : '禁用' }}
              </v-chip>
            </v-list-item-subtitle>
          </v-list-item>

          <v-list-item>
            <v-list-item-title>创建时间</v-list-item-title>
            <v-list-item-subtitle>{{ user?.createdAt }}</v-list-item-subtitle>
          </v-list-item>

          <v-list-item>
            <v-list-item-title>更新时间</v-list-item-title>
            <v-list-item-subtitle>{{ user?.updatedAt }}</v-list-item-subtitle>
          </v-list-item>
        </v-list>
      </v-card-text>

      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="primary" variant="text" @click="close">关闭</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  modelValue: Boolean,
  user: Object,
})

const emit = defineEmits(['update:modelValue'])

const dialogVisible = ref(false)
const defaultAvatar = 'https://cdn.vuetifyjs.com/images/john.jpg'

watch(
  () => props.modelValue,
  (val) => (dialogVisible.value = val),
)

watch(dialogVisible, (val) => emit('update:modelValue', val))

const close = () => {
  dialogVisible.value = false
}
</script>
